<template>
  <section class="content">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">产品列表</h3>
      </div>
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group no-margin">
            <div class="form-group">
              <div class="col-sm-3 flex">
                <label class="control-label min-width bg-gray">输入搜索：</label>
                <div class="inline-block">
                  <input type="text" class="form-control" placeholder="商品名称/商品货号">
                </div>
              </div>
              <div class="col-sm-3 flex">
                <label class="min-width bg-gray control-label">商品分类：</label>
                <div class="inline-block">
                  <select class="form-control">
                    <option value="请选择商品分类">请选择商品分类</option>
                  </select>
                </div>
              </div>
              <div class="col-sm-3 flex">
                <label class="min-width bg-gray control-label">库存低于：</label>
                <div class="inline-block">
                  <input type="text" class="form-control" placeholder="请输入最低库存值">
                </div>
              </div>
            </div>

          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <div class="col-sm-12 flex">
                  <label class="control-label min-width bg-gray">刊登状态：</label>
                  <div class="inline-block">
                    <button type="button" class="btn btn-info btn-flat m-lr-10">全部</button>
                    <button type="button" class="btn btn-flat m-lr-10">未刊登</button>
                    <button type="button" class="btn btn-flat m-lr-10">已刊登</button>
                  </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box-body -->

        <!-- /.box-footer -->
      </form>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">数据列表</h3>
            <label for="checkbox">
              <input id="checkbox" type="checkbox" class="flat-red" name="hazardous"> 只查看低于库存预警
            </label>
            <button type="button" class="btn btn-info pull-right m-r-10" data-toggle="modal" data-target="#modal-default">批量调整</button>
            <button type="button" class="btn btn-info pull-right m-r-10">生成草稿</button>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example3" class="table table-bordered table-hover">
              <thead>
              <tr>
                <th>
                  <label>
                    <input type="checkbox" class="flat-red">
                  </label>

                </th>
                <th>商品图片</th>
                <th>商品信息</th>
                <th>刊登状况（当前库存/预警）</th>
                <!--<th>重量（g）</th>-->
                <!--<th>尺寸</th>-->
                <!--<th>销量（7/30）</th>-->
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>
                  <label>
                    <input type="checkbox" class="flat-red">
                  </label>
                </td>
                <td>
                  <img src="@/assets/dist/img/user2-160x160.jpg" alt="">
                </td>
                <td>

                  <label class="m-l-15">
                    <p>
                      <label>货号：</label>
                      <span>000201010</span>
                    </p>
                    <p>
                      <label>品名：</label>
                      <span>000201010</span>
                    </p>
                    <p>
                      <label>品牌：</label>
                      <span>000201010</span>
                    </p>
                  </label>
                </td>
                <td>
                    <p>
                      eBay：10/5
                    </p>
                    <p>
                      Amazon：20/30
                    </p>
                    <p>
                      magento：20/40
                    </p>
                </td>
                <td class="text-green">
                  <span>已刊登</span>
                  <span>未刊登</span>
                </td>
                <td>
                  <a href="javascript:;" class="text-green m-lr-10" data-toggle="modal" data-target="#modal-default">库存调整</a>
                  <a href="javascript:;" class="text-green m-lr-10">添加草稿</a>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->


    <div class="modal fade" id="modal-default">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">平台库存调整</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal max_height">
              <div class="box-body">
                <table class="table table-bordered margin-bottom">
                  <tbody>
                  <tr>
                    <td class="no-border">
                      <img src="@/assets/dist/img/user2-160x160.jpg" alt="">
                    </td>
                    <td colspan="3" class="pos-relative">
                      <div class="text-left">
                        <label for="" class="m-r-10">sku：<span>20202029191</span></label>
                        <label for="">商品名称：<span>iPhoneX 64G 黑色</span></label>
                      </div>
                      <div class="text-left">
                        <label for="" class="m-r-10 text-red">Amazon<span>（5）</span></label>
                        <label for="" class="m-r-10 text-red">eBay<span>（8）</span></label>
                        <label for="" class="m-r-10">Magento<span>（30）</span></label>
                        <label for="">Wish<span>（30）</span></label>
                      </div>
                      <div class="delete">
                        <a href="javascript:;" class="btn btn-danger" @click="deleteTr">删除</a>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>Magento（30）</td>
                    <td>
                      <div class="input-group input-group-sm pos-center" style="width: 150px;">
                        <div class="input-group-btn">
                          <button type="button" class="btn btn-default"><i class="fa fa-minus"></i></button>
                        </div>
                        <input type="text" name="table_search" class="form-control pull-right text-center" value="1">

                        <div class="input-group-btn">
                          <button type="button" class="btn btn-default"><i class="fa fa-plus"></i></button>
                        </div>
                      </div>
                    </td>
                    <td>Magento（30）</td>
                    <td>
                      <div class="input-group input-group-sm pos-center" style="width: 150px;">
                        <div class="input-group-btn">
                          <button type="button" class="btn btn-default"><i class="fa fa-minus"></i></button>
                        </div>
                        <input type="text" name="table_search" class="form-control pull-right text-center" value="1">

                        <div class="input-group-btn">
                          <button type="button" class="btn btn-default"><i class="fa fa-plus"></i></button>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>Magento（30）</td>
                    <td>
                      <div class="input-group input-group-sm pos-center" style="width: 150px;">
                        <div class="input-group-btn">
                          <button type="button" class="btn btn-default"><i class="fa fa-minus"></i></button>
                        </div>
                        <input type="text" name="table_search" class="form-control pull-right text-center" value="1">

                        <div class="input-group-btn">
                          <button type="button" class="btn btn-default"><i class="fa fa-plus"></i></button>
                        </div>
                      </div>
                    </td>
                    <td>Magento（30）</td>
                    <td>
                      <div class="input-group input-group-sm pos-center" style="width: 150px;">
                        <div class="input-group-btn">
                          <button type="button" class="btn btn-default"><i class="fa fa-minus"></i></button>
                        </div>
                        <input type="text" name="table_search" class="form-control pull-right text-center" value="1">

                        <div class="input-group-btn">
                          <button type="button" class="btn btn-default"><i class="fa fa-plus"></i></button>
                        </div>
                      </div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
  </section>
</template>

<script>
  import PublishProductList from '@/js/publish/ProductLibrary/PublishProductList'
    export default {
        name: "PublishProductList",
      methods:{
        deleteTr(e){
          $(e.target).parents("table").remove();
        }
      },
      created(){
        this.$nextTick(function () {
          PublishProductList.main.init("#example3");
          $('.select2').select2()
        })
      }
    }
</script>

<style scoped>

</style>
